<template>
  <ElTreeSelect node-key="id" value-key="id" check-strictly auto-expand-parent :default-expanded-keys="[deptId]"
    v-model="deptId" :props="{ children: 'children', label: 'name' }"
    :data="showRootDept ? [{ id: rootDeptId, name: '顶层部门', children: sysDeptVOArray }] : sysDeptVOArray" />
</template>

<script setup lang="ts">
import { onMounted, onUpdated, ref } from "vue";
import { queryDeptAll } from "@/api/sysDept/sysDept";
import type { SysDeptVO } from "@/api/sysDept/sysDeptType";
import { ElTreeSelect } from "element-plus";

/**
 * 默认添加的 顶级部门 的id
 */
const rootDeptId = "0"

/**
 * 当前选中的部门id
 */
const deptId = defineModel<string>("deptId")

const props = withDefaults(defineProps<{
  /**
   * 是否显示 顶级部门
   */
  showRootDept?: boolean,
  sysDeptVOArray?: SysDeptVO[]
}>(), {
  showRootDept: false,
})

/**
 * 当前界面总的部门信息
 */
const sysDeptVOArray = ref<SysDeptVO[]>()

/**
 * 挂载时初始化数据
 */
onMounted(async () => {
  sysDeptVOArray.value = props.sysDeptVOArray ?? await queryDeptAll()
})

onUpdated(() => {

})

</script>

<style scoped lang="scss"></style>
